在原計劃中Day 23的目標是與外部 API 串接，但先前為了整體性我提早做好了這部分，
於是今天主要是繼續優化前幾天加入的匯率功能。
除此之外我還新增了「錢包」和「存錢目標」這兩個功能。
雖然這兩個功能原本不在 30 天的計畫裡，但我覺得這很適合放進記帳 App，所以這次也一併做好。

直接從記帳資料計算總資產
我利用讀取全站的 items，計算歷史累計的總收入、總支出，以及最後的淨結餘。
這裡使用 useMemo，讓 items 沒有改變時，不需要重新計算：

這也是錢包的主要核心，我想讓使用者可以了解到記帳的這幾個月自己的收支，
而這項功能也讓我更理解「單一資料來源」的概念。

讓存錢目標真的會影響錢包
除了錢包這個功能，我還設計了存錢目標，讓使用者可以有更多功能與選擇。
在設計的時候我在想…如果把錢存進某個目標，本質上就是把錢從目前可用的資金中撥出去。
所以我就把讓目前的淨結餘減掉存入的資金，使用者也可以更加直觀地看到自己剩下的存款。
於是我讓存入資金的操作，同時新增一筆支出紀錄：

這樣一來：
存錢目標的已存金額增加 → 記帳資料新增一筆支出 → 錢包淨結餘跟著減少
這次讓我比較明白，功能不是各自獨立存在的，而是要想清楚一個操作發生後，哪些資料應該一起改變。

讓存錢目標更有彈性
除了功能上的修改，我也調整了一些 UI。
現在建立好的存錢目標可以直接編輯，新增和編輯共用同一個 Modal，
透過 editingGoalId 判斷目前是在新增還是修改。
另外，我也加入了「無圖示」的選項。
如果使用者沒有選擇 Emoji，就不要硬塞一個預設圖示：

這裡使用的是 JSX 的條件渲染。
有 goal.icon 就顯示圖示，沒有的話就只顯示目標名稱，算是一個很小但實用的 UI 細節。

這邊貼一下成果:
這是錢包與目標的頁面:

這是匯率優化的結果:

總結:

• useMemo 的實戰應用：從 items 動態計算總收入、總支出與淨結餘。
• 資料連動的概念：存錢目標增加金額時，也要同步影響錢包資產。
• JSX 條件渲染：用三元運算子處理「有圖示／無圖示」的不同情況。
• Modal 複用：用同一個表單處理新增與編輯。
• Vite 除錯：從 Invalid Unicode escape sequence 找出錯誤的特殊字元。